Conversation
It did show up saved values in the database, but currently unable to change the value. TODO: - Build radio button interface - Make the repeat status label update when new value is selected - Save data.
Uncaught TypeError:
select(...).getEditedPostAttribute
is not a function
js index.js:148
js index.js:150
Webpack 3
index.js:148:52
Don't seen to be calling the getEditedPostAttribute function
properly anymore. Sadfaces.
roborourke
left a comment
roborourke
left a comment
There was a problem hiding this comment.
Hope this helps a bit!
| } | ||
|
|
||
| // Grab stored meta value of hm-post-repeat using a redux store?! | ||
| HMPostRepeatFields: withSelect( |
There was a problem hiding this comment.
This isn't really valid JS, or it at least won't be doing anything, you do this kind of assignment within an object like:
const thing = {
foo: 'bar'
};I think for what you're trying to do there's a common pattern where you create a component and then you enhance that component. They don't need to have the same variable name. For example:
const MyComponent = props => {
return <p>repeat every {props.repeat}</p>
};
const MyEnhancedComponent = withSelect( select => {
return {
repeat: select('core/editor').getEditedPostAttribute('meta')['hm-post-repeat']
}
} )( MyComponent );
There was a problem hiding this comment.
the withSelect can be refactored away with useSelect
const HMPostRepeatFields = () => {
const { repeat } = useSelect( ( select ) => {
return { repeat: select('core/editor').getEditedPostAttribute('meta')['hm-post-repeat']
}, [ ] );
if ( 'fortnightly' === repeat ) {
...There was a problem hiding this comment.
something like this:
// TODO: add imports
const PostRepeating = () => {
// retrieve current repeat settingg
const { repeat } = useSelect(
( select ) => { repeat: select('core/editor').getEditedPostAttribute('meta')['hm-post-repeat'] },
[ ]
);
// get ourselves a callback for updating it, so we can do setRepeating('fortnightly')
const { editPost } = useDispatch( 'core/editor' );
const setRepeating = useCallback( ( newRepeat ) => {
editPost( {
meta: {
'hm-post-repeat': newRepeat
}
} );
}, [ repeat ] );
// not sure what the valid values are but meh
// TODO: add an empty/none type value
const labels = {
'fortnightly': 'Fortnightly',
'weekly': 'Weekly'
};
const values = Object.keys( labels );
// return a list of labels and radio controls
return values.map( value => {
<label key={`hm-repeat${value}`}>
<input type="radio" selected={ value === repeat ? 'true' : 'false' } value={value} name="hm-repeat" onClick={ setRepeating( value ) } />
{ labels[value] }
</label>
});
}Then <PostRepeating/> inside PluginPostStatusInfo
There was a problem hiding this comment.
With that you can eliminate most of the other JS
There was a problem hiding this comment.
can probably be simpllified further by using a SelectControl https://developer.wordpress.org/block-editor/reference-guides/components/select-control/
There was a problem hiding this comment.
and GB's version of radio buttons https://developer.wordpress.org/block-editor/reference-guides/components/radio-group/
| })(({ hmpostrepeat_metafield, value, label, description }) => { | ||
| if (!hmpostrepeat_metafield) { | ||
| return ( | ||
| value= "", | ||
| label= "No", | ||
| description= "No repeating of post." | ||
| ) | ||
| } | ||
| if ('fortnightly' === hmpostrepeat_metafield) { | ||
| return ( | ||
| value= "", | ||
| label= "Fornightly JW", | ||
| description= "No repeating of post." | ||
| ) | ||
| } | ||
| return ( | ||
| <>something</> | ||
| ); | ||
| }) | ||
| )(HMPostRepeatFields); |
There was a problem hiding this comment.
I think you've got yourself in a bit of twist here. If you break it down you're doing:
HMPostRepeatFields = withSelect( ... )( props => ... )( HMPostRepeatFields )So you're chaining too many things here - withSelect() will only add additional props to the component you pass to its callback function, so the last part ( HMPostRepeatFields ) isn't doing anything.
In addition to that where you returning the following:
return (
value="",
label="...",
);
This isn't really a usable return type for a React component or indeed any JS! It should be one of null, a string, a react component or an array of those things.
One thing that might help you refactor this is to understand that within the withSelect() and also withDispatch() higher order components you don't just have to immediately return an object of additional props in the callback. You can apply some logic too, for example:
const MyEnhancedComponent = withSelect( select => {
const repeat = select('core/editor').getEditedPostAttribute('meta')['hm-post-repeat'];
switch ( repeat ) {
case 'fortnightly': {
return {
value: 'fortnightly',
label: 'Fortnightly',
description: 'Every 2 weeks',
}
}
default: {
return {
value: '',
label: 'Do no repeat',
description: '',
}
}
}
} )( props => {
return (
<p>repeat:</p>
<p><input type="radio" name="repeat" value="" checked={ props.value === '' } onChange={ props.onMetaFieldChange } /> do no repeat</p>
<p><input type="radio" name="repeat" value="fortnightly" checked={ props.value === 'fortnightly' } onChange={ props.onMetaFieldChange } /> fortnightly</p>
)
} );Note the markup above is purely demonstrative, you'll want to change that. It's really just to show that you can select values before you return them and decide what props you want to return using logic within the withSelect() or withDispatch() callbacks.
You should probably also move your custom component to it's own file and import it, you might be hitting some issues with the order in which you're declaring variables but otherwise it's just good practice.
3 participants
It did show up saved values in the database, but currently
unable to change the value.
TODO: